<template>
  <div class="head">
    <!-- <van-popup v-model="show" position="top" :style="{ height: '30%' }" /> -->
    <van-cell @click="showPopup_head" position="left"
      ><i class="fa fa-user"></i
    ></van-cell>
    <van-popup v-model="show_head"></van-popup>

    <span>平价租车</span>
    <i class="fa fa-ellipsis-h"></i>
    <!-- <span>· · ·</span> -->
    <!-- <span>
      <i class="fa fa-circle"></i>
      <i class="fa fa-circle"></i>
      <i class="fa fa-circle"></i>
    </span> -->
    <transition name="slide-fade">
      <Personal v-show="show_head" style=""></Personal>
    </transition>
  </div>
</template>

<script>
import Personal from "./Personal_center";
export default {
  props: {},
  data() {
    return {
      show_head: false,
    };
  },
  methods: {
    showPopup_head() {
      this.show_head = true;
    },
  },
  components: {
    Personal,
  },
};
</script>

<style scoped lang="less">
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.7rem;
  padding: 0 0.23rem 0 0.28rem;
  font-size: 0.29rem;
  color: #333333;
  font-weight: 700;
  background-color: #fff;
  // span:last-of-type {
  //   font-size: 0.1rem;
  // i:nth-of-type(2) {
  //   margin: 0 0.06rem;
  // }
  // }
  .van-cell {
    padding: 0;
    width: 0.3rem;
    & > div {
      i {
        font-size: 0.3rem;
      }
    }
  }
  .slide-fade-enter-active {
    transition: all 0.5s ease;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter,
        .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(-7.5rem);
    opacity: 0;
  }
}
</style>
